<template>
	<!-- <page-head class="bindStuTitle" title="绑定学员" fColor="#333333" icon="icon-home" url="/pages/index/index"></page-head> -->
	<view class="backgrounCont">
		<view class="tit_text">查询您的手机号关联以下学员，可绑定多个学员 </view>
		<view v-if="hasContent" class="select_box">
			<checkbox-group @change="checkboxChange">
				<label  v-for="(item,index) in userArray" :key="index">
					<view class="select_item"  style="display: flex;justify-content: space-between;" >
						<view class="select_div">
							<view>
								<img class="mine_avatar" src="https://cdndoc.bj.xdf.cn/student/images/logo.png" alt="">
							</view>
								<view class="mine_content">
								<p class="user_name" ref="userName">{{item.studentName}}</p>
								<!-- <p class="user_name" ref="userName">{{item.studentName}} <span class='box_style' v-if="item.isBind != '0' && item.isBind != '1'&& item.isBind != '2'">已过期</span></p> -->
								<p class="user_number" ref="userNum">学员号：<span ref="studentCode"
										id="studentCode">{{item.studentCode}}</span></p>
								<!-- <p class="user_id" ref="userId" id="userId">{{item.userId}}</p> -->
							</view>							
						</view>
						<checkbox  v-if="!item.expiredFlag&&!item.addFlag" class="mycheck" color="#3889fd" style="transform:scale(0.7);" :value="item.studentCode" :checked="item.checked" />
						<view class="bound" v-else>{{statusTetx(item)}}</view>
					</view>
				</label>
			</checkbox-group>
		</view>
		<view v-else class="not_user">
			<img v-if="showflag" src="https://cdndoc.bj.xdf.cn/student/images/not_user.png" alt="">

		</view>
		<view class="btn_row">
			<!-- <view class="btn login_btn" @click="directLogin">直接登录</view> -->
			<div class="btn add_btn "  :class="{'add_btn_color':getLength}" @click="addStu" >绑定学员</div>
		</view>
		<div v-if="status == 2" class="prompt-box">
			<div class="alert_prompt" ref="alertPop">
				<view class="iconfont icon-prompt prompt_icon"></view>
				<p class="prompt_text">{{msg}}</p>
			</div>
		</div>
	</view>
</template>

<script>
	import { apiAddBinding} from '@/api/user/user.js'
	import {mapActions} from "vuex"
	export default {
	    name: 'IedpMaterialUiChooseuser',
	    data() {
	        return {
	            hasContent:true,
	            // popShow:false,
	            myInfo: {},
	            userArray:[],
	            studentCode:"",
	            userId:"",
	            loading: false,
				to: '',	// 1, 单词、2、物料  绑定成功够跳转的位置
				showflag:false,
				status:1,
				msg:'',
				studentCodeList:''
	        };
	    },
	    created() {
	        // this.getUserInfo()
			console.log('获取学员列表',this.$store.getters.studentList)
			this.userArray=this.$store.getters.studentList.length?this.$store.getters.studentList:[]//[{"studentCode":"BJ8429376445","studentName":"黄锦论","expiredFlag":false,"addFlag":false,"bindFlag":false,"orderNum":1},{"studentCode":"BJ4630892253","studentName":"王芊戈","expiredFlag":true,"addFlag":false,"bindFlag":false,"orderNum":3}]
			// this.$store.getters.studentList.length?this.$store.getters.studentList:[],
			console.log('studentCodeList',this.studentCodeList)
	    },
		computed: {
			getLength() {
				return this.studentCodeList.length>0?true:false
			}
		},
		onLoad(option) {
			this.to = option.to
		},
	    methods: {
			...mapActions(["SetUserInfo"]),
			checkboxChange(e){
				console.log('e',e.detail)
				this.studentCodeList=e.detail.value
			},
			statusTetx(item){
				if(item.expiredFlag){
					return '已过期'
				}else{
					if(item.addFlag&&!item.bindFlag){
						return '已添加'
					}
					if(item.addFlag&&item.bindFlag){
						return '已添加'
					}
				}
				
			},
	        // 添加学员号
	        addStu(){
				if(!this.studentCodeList.length){
					return
				}
				let arrList=[]
				this.userArray.forEach(item=>{
					if(this.studentCodeList.includes(item.studentCode)){
						arrList.push({
							studentName:item.studentName,
							studentCode:item.studentCode
						})
					}
				})
				// 绑定学员
				apiAddBinding(JSON.stringify(arrList)).then(res => {
					if(res.code==200){
						const text = arrList.length == 1 ? '绑定成功' : '添加成功'
						uni.showToast({
								title:text,
								icon: 'success'
							})
							setTimeout(() =>{
								uni.navigateBack({
									delta: 2
								});
							},2000)
					}else{
						uni.showToast({
							title:res.msg,
							icon: 'success'
						})
					}
				
				}).catch((err)=>{
					console.log('错误',err)
					uni.showModal({
						title:err.msg,
						showCancel:false,
					})
				})
				
	        },
	    },
	};
</script>

<style scoped lang="scss">
	@function torem($rpx){  //$rpx为需要转换的字号
	    @return #{$rpx * 100 / 750 / 4}rem; 
	}
	::v-deep label{
		padding: 0;
	}
.backgrounCont{
        position: relative;
        width: 100%;
    }
    .tit_text{
       width:100%;
       height: 72rpx;
       line-height: 72rpx;
       background: #fde8e6;
       color: #FD453D;
       text-align: center;
       font-size: 24rpx;
       font-weight: 400;
       margin-bottom:30rpx;
    }
    .select_box{
        margin-top: 5%;
        // width: 100%;
		padding: 0 4%;
		padding-bottom: 11%;
		.select_div{
			flex: 1;
			display: flex;
			align-items: center;
		}
        .select_item{
			box-sizing: content-box;
            position: relative;
            margin-bottom: torem(20);
            display: flex;
            align-items: center;
            padding: 4%;
            height: torem(80);
            border: 2rpx solid #F6F7F9;
            border-radius: 3rpx;
            .mine_avatar{
                width: torem(80);
                height: torem(80);
            }
            .mine_content{
                margin-left: 3%;
                .user_name{
                    font-size: torem(28);
                    color: #333333;
                }
                .user_number{
                    margin-top: 4%;
                    font-size: torem(24);
                    color: #999999;
                }
                .user_id{
                    display: none;
                }
            }
            
        }
    }
    .btn_row{
        position: fixed;
        display: flex;
        bottom:torem(27);
        width: 100%;
        height: torem(100);
        background: #ffffff;
        .btn{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            width: torem(140);
            height:86rpx;
			border-radius: 46rpx;
        }
        .login_btn{
            margin: 0 1% 0 4%;
            border: 2rpx solid #0BC285;
            color: #0BC285;
            font-size: torem(32);
        }
        .add_btn{
            margin: 0 4% 0 4%;
            background: #ccc;
            color: #ffffff;
            font-size: torem(32);
        }
    }
	.prompt-box {
		position: fixed;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		z-index: 2;
		.alert_prompt {
			display: flex;
			text-align: center;
			align-items: center;
			flex-flow: column;
			flex-wrap: wrap;
			width: 60%;
			height: 15%;
			background: #313131;
			border-radius: torem(14);

			.prompt_icon {
				margin-top: 7%;
				width: torem(40);
				height: torem(40);
				color: #FFFFFF;
				font-size: torem(64);
			}

			.prompt_text {
				font-size: torem(24);
				margin-top: 7%;
				color: #ffffff;
			}

		}

	}
	.box_style{
		width: torem(98);
		height: 100%;
		border: 2rpx solid #ffffff;
		font-size: torem(24);
		color: #ffffff;
		display: inline-block;
		border-radius: torem(24);
		text-align: center;
		line-height: torem(40);
		background: #838D98!important;
	}
	.not_user{
	    margin-top: 50%;
	    width: 100%;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    img{
	        width: torem(340);
	        height:torem(222);
	    }
	}
	.bound{
		font-size: torem(24);
		color: #ccc;
	}
	.add_btn_color{
		// background-color: #0BC285 !important;
		background: #FD453D !important;
		
	}
</style>
